<template>
	<div>
    <a-card
      style="margin-top: 24px"
      :bordered="false"
      title="招聘列表">

      <div slot="extra">
        <!-- <a-radio-group v-model="status">
          <a-radio-button value="all">全部</a-radio-button>
          <a-radio-button value="hot">热招</a-radio-button>
          <a-radio-button value="stop">停止</a-radio-button>
        </a-radio-group> -->
        <!-- <a-input-search style="margin-left: 16px; width: 272px;" /> -->
      </div>

      <div class="operate">
        <a-button type="dashed" style="width: 100%" icon="plus" @click="add">添加</a-button>
      </div>

      <a-list size="large" :pagination="pagination">
        <a-list-item :key="index" v-for="(item, index) in data">
          <a-list-item-meta :description="`简介：${item.job_dec}`">
            <!-- <a-avatar slot="avatar" size="large" shape="square" :src="item.avatar"/> -->
            <a slot="title">职位：{{ item.job_name }}</a>
          </a-list-item-meta>
          <div slot="actions">
            <a @click="stop(item)" :style="item.is_start==1?{color:'red'}:''">{{item.is_start=='1'?'停止招聘':'开始招聘'}}</a>
          </div>
          <div slot="actions">
            <a-dropdown>
              <a-menu slot="overlay">
                <a-menu-item @click="edit(item)"><a>编辑</a></a-menu-item>
                <a-menu-item @click="del(item)"><a>删除</a></a-menu-item>
              </a-menu>
              <a>更多<a-icon type="down"/></a>
            </a-dropdown>
          </div>
          <div class="list-content">
            <div class="list-content-item" style="text-align: center;">
              <span>技能标签</span>
              <p>{{item.job_label.join(',')}}</p>
            </div>
            <div class="list-content-item">
              <span>开始时间</span>
              <p>{{ item.job_start }}</p>
            </div>
           <!-- <div class="list-content-item">
              <a-progress :percent="item.progress.value" :status="!item.progress.status ? null : item.progress.status" style="width: 180px" />
            </div> -->
          </div>
        </a-list-item>
      </a-list>
    </a-card>
	</div>
</template>

<script>
// 演示如何使用 this.$dialog 封装 modal 组件
import TaskForm from './modules/TaskForm'
import Info from './components/Info'
  import {jobList,jobIsStart,jobDelete} from  '@/api/job.js'
  
export default {
  name: 'StandardList',
  components: {
    TaskForm,
    Info
  },
  data () {
    return {
      data:[],
	  alldata:[],
      status: 'all',
	  pagination: {
	  	showSizeChanger: true,
	  	pageSizeOptions: ['10', '20', '50'],
	  	current:1,
	  	pageSize: 10,
	  	total:0,
	  	onChange:(current, size)=>{
	  		this.pagination.current = current;
	  		this.pagination.pageSize = size;
	  		this.getList()
	  	},
	  	onShowSizeChange:(current, size)=>{
	  		this.pagination.current = current;
	  		this.pagination.pageSize = size;
	  		this.getList()
	  	}
	  },
    }
  },
  mounted() {
  	this.getList()
  },
  methods: {
	  getList(){
		  this.data = [];
	  	jobList({page:this.pagination.current,size:this.pagination.pageSize}).then(res=>{
			this.pagination.total = res.data.total
	  		this.alldata = res.data.list;
			switch (this.status){
				case 'all':
					this.data = this.alldata;
					break;
				case 'hot':
					this.data = this.alldata.filter(i=>i.is_start=='1');
					break;
				case 'stop':
					this.data = this.alldata.filter(i=>i.is_start=='2');
					break;
				default:
					break;
			}
	  	})
	  },
	  stop(item){
		  if(item.is_start=='1'){
			  item.is_start='2';
		  }else{
			  item.is_start='1'
		  }
		  jobIsStart(item).then(res=>{
			  this.getList();
		  })
	  },
    add () {
		let that = this;
      this.$dialog(TaskForm,
        // component props
        {
          record: {},
          on: {
            ok () {
				 that.getList()
              console.log('ok 回调')
            },
            cancel () {
              console.log('cancel 回调')
            },
            close () {
              console.log('modal close 回调')
            }
          }
        },
        // modal props
        {
          title: '新增',
          width: 750,
          centered: true,
          maskClosable: false
        })
    },
    edit (record) {
     let that = this;
      this.$dialog(TaskForm,
        // component props
        {
          record,
          on: {
            ok () {
				 that.getList()
              console.log('ok 回调')
            },
            cancel () {
              console.log('cancel 回调')
            },
            close () {
              console.log('modal close 回调')
            }
          }
        },
        // modal props
        {
          title: '编辑',
          width: 750,
          centered: true,
          maskClosable: false
        })
    },
	del(item){
		console.log(item)
		jobDelete({id:item.id}).then(res=>{
			this.getList()
		})
	},
  }
}
</script>

<style lang="less" scoped>
.ant-avatar-lg {
    width: 48px;
    height: 48px;
    line-height: 48px;
}

.list-content-item {
    color: rgba(0, 0, 0, .45);
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    margin-left: 40px;
    span {
        line-height: 20px;
    }
    p {
        margin-top: 4px;
        margin-bottom: 0;
        line-height: 22px;
    }
}
</style>
